<template>
	<view class="enter">
		<view class="enter-head"><text>{{school_result.school_batch_str}}</text><text>{{school_result.school_title}}</text><text class="blod">{{school_result.title}}</text></view>
		<view class="univer-tabs">
			<u-tabs-swiper ref="uTabs" :list="tabList" :current="current" @change="tabsChange" :is-scroll="false"
				active-color="#20b86f" swiperWidth="750"></u-tabs-swiper>
		</view>
		<view v-show="current == 0">
			<view class="enter-title">同位分分析法</view>
			<view class="enter-charts">
				<canvas canvas-id="canvasColumn1" id="canvasColumn" class="enter-charts" @touchstart="touchColumn"></canvas>
			</view>
			<view class="enter-title">位次定位法</view>
			<view class="enter-charts">
				<canvas canvas-id="canvasColumn2" id="canvasColumn" class="enter-charts" @touchstart="touchColumn"></canvas>
			</view>
			<view class="enter-title">线差分析法</view>
			<view class="enter-charts">
				<canvas canvas-id="canvasColumn3" id="canvasColumn" class="enter-charts" @touchstart="touchColumn"></canvas>
			</view>
		</view>
		<view v-show="current == 1" class="enter-table">
			<u-table>
				<u-tr>
					<u-th>年份</u-th>
					<u-th v-for="(item,i) in table" :key="i">{{item.year}}</u-th>
				</u-tr>
				<u-tr>
					<u-td>计划数</u-td>
					<u-td v-for="(item,i) in table" :key="i">{{item.plan_count}}</u-td>
				</u-tr>
				<u-tr>
					<u-td>录取数</u-td>
					<u-td v-for="(item,i) in table" :key="i">{{item.enroll_count}}</u-td>
				</u-tr>
				<u-tr>
					<u-td>最高分</u-td>
					<u-td v-for="(item,i) in table" :key="i">{{item.number_max}}</u-td>
				</u-tr>
				<u-tr>
					<u-td>平均分</u-td>
					<u-td v-for="(item,i) in table" :key="i">{{item.number_avg}}</u-td>
				</u-tr>
				<u-tr>
					<u-td>最低分</u-td>
					<u-td v-for="(item,i) in table" :key="i">{{item.number_min}}</u-td>
				</u-tr>
			</u-table>
		</view>
	</view>
</template>

<script>
	var _self;
	var canvaColumn=null;
	import uCharts from '../../js_sdk/u-charts/u-charts/u-charts.js';
	export default {
		data() {
			return {
				tabList: [{
					name: '录取概率分析'
				}, {
					name: '近三年录取情况'
				}],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				obj: {},
				table: [],
				school_result: ''
			}
		},
		onLoad(options) {
			this.obj = {
				analyze_type: "1",
				major_code: options.major_type,
				major_id: options.major_id,
				school_code: options.school_code
			}
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.getServerData(1);
			this.getServerData(2);
			this.getServerData(3);
		},
		methods: {
			getServerData(type) {
				this.obj.analyze_type = type;
				this.http({
					url: `api/v1/choose_major/analyze_compute`,
					method: 'POST',
					data: this.obj,
					success: res => {
						this.school_result = res.result.school_result;
						if(type == 1) {
							let Column1 = {
								categories: res.result.chart_option.xAxis[0].data,
								series: [{
								"name": "最低分",
								"data": res.result.chart_option.series[0].data
							  }, {
								"name": "平均分",
								"data": res.result.chart_option.series[1].data
							  },{
								"name": "最高分",
								"data": res.result.chart_option.series[2].data
							  }]
							};
							_self.showColumn("canvasColumn1", Column1, res.result.my_number);
						}else if(type == 2) {
							let Column2 = {
								categories: res.result.chart_option.xAxis[0].data,
								series: [{
								"name": "最低分",
								"data": res.result.chart_option.series[0].data
							  }, {
								"name": "平均分",
								"data": res.result.chart_option.series[1].data
							  },{
								"name": "最高分",
								"data": res.result.chart_option.series[2].data
							  }]
							};
							_self.showColumn("canvasColumn2", Column2, res.result.chart_option.series[0].markLine.data[0].yAxis);
						}else if(type == 3) {
							let Column3 = {
								categories: res.result.chart_option.xAxis[0].data,
								series: [{
								"name": "最低分",
								"data": res.result.chart_option.series[0].data
							  }, {
								"name": "平均分",
								"data": res.result.chart_option.series[1].data
							  },{
								"name": "最高分",
								"data": res.result.chart_option.series[2].data
							  }]
							};
							_self.showColumn("canvasColumn3", Column3, res.result.chart_option.series[0].markLine.data[0].yAxis);
						}
						if(this.table.length<=0){
							for (let s of res.result.list) {
								this.table.push({
									year: s.year,
									plan_count: s.plan_count,
									enroll_count: s.enroll_count, 
									number_max: s.number_max,
									number_avg: s.number_avg, 
									number_min: s.number_min, 
									my_number: res.result.my_number
								});
							}
						}
					},
				})
			},
			showColumn(canvasId, chartData, markNum) {
				canvaColumn = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'column',
					padding: [15, 15, 0, 15],
					legend: {
						show: true,
						padding: 5,
						margin: 0,
					},
					fontSize: 12,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: true,
					dataLabel: true,
					enableMarkLine: true,
					/***需要开启标记线***/
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						disableGrid: true,
						disabled: true,
					},
					extra: {
						column: {
							type: 'group',
							width: 25
							// width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length
						},
						markLine: {
							type: 'dash',
							dashLength: 5,
							data: [{
								value: markNum,
								lineColor: '#f04864',
								showLabel: true,
								labelFontColor: '#f04864',
								labelBgColor: "#fff"
							}]
						}
					}
				});
			
			},
			goto(name) {
				uni.navigateTo({
					url: name
				});
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="less" scoped>
	.enter-head {
		padding-left: 10rpx;
		text {
			line-height: 70rpx;
			margin-right: 20rpx;
		}
		.blod {
			font-weight: bold;
		}
	}
	.enter-charts {
		width: 100%;
		height: 500rpx;
		background-color: #FFFFFF;
	}
	.enter-title {
		padding: 30rpx;
		font-size: 32rpx;
	}
	.enter-table {
		padding-top: 40rpx;
		height: 100%;
	}
</style>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
